<!--
 * @Description: 职位列表
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-11-23 10:23:13
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-21 17:19:24
-->

<template>
  <div class="no-padding">
    <adminTable
      ref="refTable"
      :form-inline="formInline"
      :api-fun="apiFun"
      :table-column="tableColumn"
      :table-data.sync="tableData"
    >
      <!-- 搜索 -->
      <template slot="search">
        <el-form-item>
          <el-input v-model="formInline.keyword" clearable placeholder="职位名称" />
        </el-form-item>
      </template>
      <el-form-item slot="button">
        <el-button type="success" @click="addClick">添加</el-button>
      </el-form-item>
      <template slot="modifierName" slot-scope="scope">
        {{ scope.value.modifierName }}
      </template>
      <!-- 表格操作 -->
      <template slot="operate" slot-scope="scope">
        <el-button type="text" size="small" @click="editClick(scope.value)">
          编辑
        </el-button>
        <el-button type="text" size="small" @click="deleteClick(scope.value)">
          删除
        </el-button>
      </template>
    </adminTable>
    <!-- 添加编辑组件 -->
    <PositionAddEdit
      :show.sync="dialogFormVisible"
      :form-data.sync="formData"
      @refresh="refreshList"
    />
  </div>
</template>

<script>
// 组件引入
import adminTable from '@/components/admin/admin-table'
import PositionAddEdit from './components/PositionAddEdit'
// 接口
import { positionList, positionDelete } from '@/api/basics'
// 页面配置
import { PositionClumen } from '@/views/basics/count'
// 公共方法
import { openMessageBox } from '@/utils/utils'
export default {
  components: {
    adminTable,
    PositionAddEdit
  },
  data() {
    return {
      tableColumn: PositionClumen,
      tableData: [],
      formInline: {
        keyword: ''
      },
      apiFun: positionList,
      dialogFormVisible: false,
      formData: {
        genre: 'add',
        positionName: ''
      }
    }
  },
  methods: {
    // 编辑设置表单数据
    editClick(e) {
      this.dialogFormVisible = true
      this.formData = {
        genre: 'edit',
        ...e
      }
    },
    // 添加清空表单数据
    addClick() {
      this.dialogFormVisible = true
      this.formData = {
        genre: 'add',
        positionName: ''
      }
    },
    // 删除点击弹出提示
    deleteClick(row) {
      openMessageBox({
        content: '删除数据后，将不可恢复，是否确认？',
        title: '删除数据'
      }, (boole) => {
        if (boole) {
          // 删除角色接口请求
          positionDelete({ id: row.positionId }).then((res) => {
            this.$message({ message: '删除成功', type: 'success' })
            this.$refs.refTable.getList()
          })
        }
      })
    },
    refreshList() {
      this.$refs.refTable.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
